<template>
  <main class="main-container" v-loading="partStore.isLoading">
    <div class="search-container">
      <div style="display: flex">
        <el-text>保养项目名称：</el-text>
        <div style="margin-left: 10px">
          <el-select
            v-model="partStore.currentProjectName"
            filterable
            clearable
            style="width: 240px"
            placeholder="请选择要检索的项目"
          >
            <el-option
              v-for="item in partStore.projectNames"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="table-container">
      <el-table :data="partStore.parts" style="width: 100%; margin-top: 20px">
        <el-table-column prop="partName" label="部件名称" />
        <el-table-column prop="deviceId" label="设备节点" />
        <el-table-column prop="warningTaskName" label="报警任务" />
        <el-table-column prop="currentValueTaskName" label="当前值任务" />
        <el-table-column prop="warningValueTaskName" label="预警值任务" />
        <el-table-column prop="stopValueTaskName" label="停机值任务" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="partStore.deletePartAsync(scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        v-if="partStore.isSelectProjectName"
        class="mt-4"
        @click="showAddItemDialog = true"
        style="width: 100%; margin-top: 10px"
      >
        添加配置
      </el-button>
    </div>
    <el-dialog
      v-model="showAddItemDialog"
      title="添加新的部件"
      width="400"
      :close-on-click-modal="false"
      draggable
    >
      <div>
        <el-text>保养部件名称：</el-text>
        <el-input style="margin-top: 4px" maxlength="20" type="text" v-model="partName"></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-text>设备节点ID：</el-text>
        <el-select v-model="nodeId" filterable clearable placeholder="请选择设备节点 ID">
          <el-option v-for="item in partStore.nodeIds" :key="item" :label="item" :value="item" />
        </el-select>
      </div>
      <div style="margin-top: 10px">
        <el-text>报警任务名称：</el-text>
        <el-input
          style="margin-top: 4px"
          maxlength="20"
          type="text"
          v-model="warningTaskName"
        ></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-text>当前值任务名称：</el-text>
        <el-input
          style="margin-top: 4px"
          maxlength="20"
          type="text"
          v-model="currentValueTaskName"
        ></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-text>预警值任务名称：</el-text>
        <el-input
          style="margin-top: 4px"
          maxlength="20"
          type="text"
          v-model="warningValueTaskName"
        ></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-text>停机值任务名称：</el-text>
        <el-input
          style="margin-top: 4px"
          maxlength="20"
          type="text"
          v-model="stopValueTaskName"
        ></el-input>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <el-button type="primary" @click="onInsert">添加</el-button>
      </div>
    </el-dialog>
  </main>
</template>

<script setup lang="ts">
import { Search, Refresh } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useDeviceMaintenancePartStore } from '@/stores/device-maintenance/part'
import { ElMessage } from 'element-plus'
import type { Part } from '@/types/system/device-maintenance/part'

const partName = ref('')
const nodeId = ref('')
const warningTaskName = ref('')
const currentValueTaskName = ref('')
const stopValueTaskName = ref('')
const warningValueTaskName = ref('')
const showAddItemDialog = ref(false)
const partStore = useDeviceMaintenancePartStore()

if (partStore.isNeedLoadParts) {
  partStore.updatePartsAsync()
}

async function onInsert() {
  const id = partStore.tryGetCurrentProjectId()
  if (id == null) {
    ElMessage.info('当前选择的项目不存在，请重新检索项目')
  } else if (partName.value == '' || partName.value.length < 6) {
    ElMessage.info('部件名称不得小于6个字符')
  } else if (nodeId.value == '' || nodeId.value == null) {
    ElMessage.info('请选择设备节点 ID ')
  } else {
    // 先关闭对话框
    showAddItemDialog.value = false
    const result = await partStore.insertPartAsync({
      projectId: id,
      partName: partName.value,
      deviceId: nodeId.value,
      warningTaskName: warningTaskName.value,
      currentValueTaskName: currentValueTaskName.value,
      warningValueTaskName: warningValueTaskName.value,
      stopValueTaskName: stopValueTaskName.value
    } as Part)

    if (result) {
      ElMessage.success('添加部件成功')
    } else {
      ElMessage.error('添加部件错误')
    }
  }
}
</script>

<style scoped>
.main-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content-container {
  padding: 30px 30px 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.table-container {
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-container {
  padding: 30px 30px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
</style>
